<template>
  <div class="shop">

    <el-row>
      <el-col :span="2">
        <!-- <el-button
              size="mini"
              type="primary"
              @click="exportWoodsStore"
              >导出数据</el-button
            > -->
      </el-col>
      <el-col :span="22">
        <el-form :inline="true" size="mini" :model="listQuery" class="form">
          <el-form-item label="创建时间:">
            <el-date-picker v-model="listQuery.beginTime" type="date" style="width: 136px" value-format="yyyy-MM-dd"
              placeholder="选择开始时间"></el-date-picker>~
            <el-date-picker v-model="listQuery.endTime" type="date" style="width: 136px" value-format="yyyy-MM-dd"
              placeholder="选择结束时间"></el-date-picker>
          </el-form-item>
          <!-- <el-form-item>
            <span style="margin-top: 4px; color: #666; margin-right: 8px">结算状态</span>
            <el-select v-model="form.orderStatus" size="mini" filterable>
              <el-option :value="0" label="请选择"></el-option>
              <el-option :value="1" label="待支付"></el-option>
              <el-option :value="5" label="已支付待核销"></el-option>
              <el-option :value="10" label="已核销（已完成）"></el-option>
              <el-option :value="15" label="已取消（订单未支付）"></el-option>
              <el-option :value="20" label="已失效（关闭）"></el-option>
            </el-select>
          </el-form-item> -->
          <!-- <el-input
              style="float: right; width: 164px; margin-top: 20px"
              size="mini"
              placeholder="所属小店"
              v-model="shop_user_mobile"
            ></el-input> -->
          <!-- <el-form-item>
              <span style="margin-top: 4px; color: #666; margin-right: 8px"
              >收益类型</span
            >
            <el-select

            v-model="form.orderType"
            size="mini"
            filterable
          >
          <el-option :value="0" label="请选择"></el-option>
            <el-option :value="5" label="小店商品"></el-option>
            <el-option :value="20" label="红包充值"></el-option>
            <el-option :value="6" label="平台商品"></el-option>
            <el-option :value="4" label="优惠买单"></el-option>
          </el-select>
          </el-form-item> -->
          <el-button size="mini" type="primary" @click="searchArea">搜索</el-button>
        </el-form>
      </el-col>
    </el-row>



    <el-table :data="tableData" style="width: 100%; margin: 40px 0" max-height="680" :cell-style="tc"
      :header-cell-style="tccolor">
      <!-- <el-table-column label="订单ID" prop="orderid"></el-table-column> -->
      <el-table-column label="创建时间" prop="createdAt"></el-table-column>
      <!-- <el-table-column label="收益类型" prop="commissionStatusText"> -->
      <!-- <template slot-scope="scope">
            <p v-if="scope.row.order_type == 50">红包充值</p>
            <p v-if="scope.row.order_type == 31">红包充值间接返利</p>
            <p v-if="scope.row.order_type == 30">会员费</p>
            <p v-if="scope.row.order_type == 20">优惠买单</p>
          </template> -->
      <!-- </el-table-column> -->
      <el-table-column label="变动金额（元）" prop="money"></el-table-column>
      <!-- <el-table-column
          label="预估收益（元）"
          prop="estimate_revenue"
        ></el-table-column> -->
      <!-- <el-table-column label="订单号" prop="orderid"></el-table-column> -->
      <el-table-column label="类型" prop="typeName"></el-table-column>
      <el-table-column label="用户" prop="nickName"></el-table-column>
      <!-- <el-table-column label="状态" prop="status">
        <template slot-scope="scope">
          <p v-if="scope.row.status == 0">待收益</p>
          <p v-if="scope.row.status == 1">已收益</p>
          <p v-if="scope.row.status == 2">已失效</p>
          <p v-if="scope.row.status == 3">已冻结</p>
        </template>
      </el-table-column> -->
    </el-table>

    <div class="pagination">
   

      <el-pagination background @current-change="pageChange" :current-page="listQuery.pageNum"
        :page-size="listQuery.pageSize" layout="total, prev, pager, next, jumper" :total="total"
        style="display: inline-block"></el-pagination>
    </div>
  </div>
</template>

<script>
import { redPacketsOrders } from "@/api/others.js";
// import { ServiceListSearch, ServiceAllNumSearch } from "@/api/service.js";
import { API_BASE_URL } from "@/config";
export default {
  data() {
    return {
      //合伙人服务商id
      uid: "",
      tableData: [],
      page: 1,
      size: 20,
      total: 0,
      shop_user_mobile: "",
      status: "",
      order_type: "",
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        beginTime:'',
        endTime:'',
        // keyword: "",
        // searchType: 0,
        // memberId: 0
      },

      form: {
        /** start_time: "",
        end_time: "",
        */
        /**
         * 订单创建开始时间
         */
        beginTime: "",
        /**
         * 订单创建结束时间
         */
        endTime: "",
        /**
         * 搜索
         */
        keyword: "",
        /**
         * 购买用户账号
         */
        mobile: "",
        /**
         * 订单编号
         */
        orderNo: "",
        /**
         * 订单状态 1待支付 5：已支付待核销 10：已核销（已完成）15：已取消（订单未支付）20：已失效（关闭）
         */
        orderStatus: 0,
        /**
         * 订单类型（收益类型） 4小店买单（优惠买单） 5小店商品 20红包充值 6平台商品
         */
        orderType: 0,
        pageNum: 1,
        pageSize: 20,
        /**
         * 合伙人id
         */
        partnerId: 0,
        /**
         * 分销平台
         * TAOBAO :TAOBAO
         * JDCOM :JDCOM
         * PINDUODUO :PINDUODUO
         * VIPSHOP :VIPSHOP
         */
        platform: 0,
        /**
         * 小店id
         */
        sellerId: 0,
        /**
         * 服务经理账号
         */
        serviceMobile: "",
      },
      // 已结算收益
      settled_income: "",
      // 未结算收益
      unsettled_income: "",
    };
  },
  mounted() {
    this.uid = this.$route.query.serviceId;
    this.form.partnerId = this.$route.query.serviceId;
    this.form.orderType = this.$route.query.orderType
    console.log(this.uid);
    this.staffListSearchData();
    // if (this.uid) {
    //   this.staffListSearchData();
    //   //this.ServiceAllNumSearch();
    // }
  },
  methods: {
    //查看管理小店
    watchTotalShop(id) {
      console.log(id);
    },
    //权限详情
    watchManagentDetail(id) {
      console.log(id);
    },
    // 搜索
    searchArea() {
      this.page = 1;
      this.staffListSearchData();
      this.ServiceAllNumSearch();
    },
    // 获取收益总数
    async ServiceAllNumSearch() {
      var url =
        "?uid=" +
        this.uid +
        "&order_type=" +
        this.order_type +
        "&status=" +
        this.status;
      let res = await ServiceAllNumSearch(url);
      if (res.code == 10000) {
        this.unsettled_income = res.data.unsettle_revenue;
        this.settled_income = res.data.settle_revenue;
      }
    },
    //获取列表数据
    async staffListSearchData() {
      var url =
        "?uid=" +
        this.uid +
        "&page=" +
        this.page +
        "&size=" +
        this.size +
        "&shop_user_mobile=" +
        this.shop_user_mobile +
        "&order_type=" +
        this.order_type +
        "&status=" +
        this.status +
        "&start_time=" +
        this.form.start_time +
        "&end_time=" +
        this.form.end_time;
      let res = await redPacketsOrders(this.listQuery);
      if (res.code === 200) {
        this.export = res.data;
        this.tableData = res.data.list;
        this.total = res.data.total;
      } else {
        this.$message.error(res.message);
      }
    },
    // 导出仓库
    exportWoodsStore() {
      window.open(
        `${API_BASE_URL}/admin/download/zip/${this.export.download_token}`
      );
      return;
    },
    pageChange(page) {
      this.form.pageNum = page;
      this.staffListSearchData();
    },
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
  },
};
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;

  .pagination {
    float: right;
    margin-bottom: 20px;
  }

  .record {
    display: inline-block;
    position: relative;
    top: 5px;
    right: 30px;
  }
}

.forms {
  position: relative;
  top: 19px;
  float: right;
}
</style>
